import React from 'react';

import cn from 'classnames';

import cs from './Title.module.scss';

type SizeVariant = 'l' | 'xl' | 's' | 'm' | 'm-no-bold' | 'xs' | 'modal-size';
interface TitleProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> {
  title?: string;
  className?: string;
  size?: SizeVariant;
  tag?: React.ElementType;
}
export const Title = ({ title, className, children, size, tag: Tag = 'p', ...props }: TitleProps) => (
  <Tag className={cn(cs.title, className, size && cs[size as SizeVariant])} {...props}>
    {title || children}
  </Tag>
);
